<template>
  <div class="index-main">
		<div class="index-main-tabs">
			<ul>
				<li v-for="(data,index) in tabs" :key="index">
					<router-link :to="data.path" :class="{active: $route.path=== data.path}">{{data.name}}</router-link>
				</li>
			</ul>
			<div class="back"><el-button size="mini" @click="$router.push({path: '/'})">管理后台</el-button></div>
		</div>
		<main class="main">
			<div class="angles">
				<span class="angle-left-top"></span>
				<span class="angle-right-top"></span>
				<span class="angle-left-bottom"></span>
				<span class="angle-right-bottom"></span>
			</div>
			<div class="borders">
				<div class="border-1"></div>
				<div class="border-2"></div>
				<div class="border-3"></div>
				<div class="border-4"></div>
				<div class="border-5"></div>
				<div class="border-6"></div>
			</div>
			<router-view />
		</main>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				tabs: [{
					path: '/data',
					name: '页面总数据分析'
				},{
					path: '/model-list',
					name: '漏斗模型列表'
				},{
					path: '/map-data',
					name: '地图数据'
				},{
					path: '/user-data',
					name: '用户数据'
				},{
					path: '/merchant-data',
					name: '商家数据'
				}],
			}
		},
		methods: {
			
		},
		created(){
		}
	}
</script>
<style lang="scss" scoped>
.index-main{
	position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: url(../assets/data-images/fullscreen-bg.jpg) 50% 50% no-repeat;
		background-size: cover;
		&::before{
			position: absolute;
			content: '';
			width: 282px;
			height: 200px;
			background: url(../assets/data-images/top-left-icon.png) no-repeat;
		}
		&::after{
			position: absolute;
			content: '';
			width: 282px;
			height: 200px;
			right: 0;
			background: url(../assets/data-images/top-right-icon.png) no-repeat;
		}
		.index-main-tabs{
			position: absolute;
			width: 100%;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 50px;
			z-index: 10;
			.back{
				position: absolute;
				right: 80px;
				color: #FFF;
				top: 0;
				line-height: 34px;
				cursor: pointer;
				/deep/ .el-button{
					transform: skew(-35deg);
					color: #64aac9;
					background-color: transparent;
					border-color: #00fbfc;
					padding: 5px 20px;
					span{
						display: inline-block;
						transform: skew(35deg);
					}
				}
			}
			ul{
				display: flex;
				justify-content: center;
				position: relative;
				li{
					text-align: center;
					margin: 0 -10px;
					a{
						font-size: 16px;
						color: #64aac9;
						display: block;
						position: relative;
						width: 307px;
						height: 47px;
						line-height: 45px;
						transition: all .2s;
						background: url(../assets/data-images/tabs-bg-1.png) no-repeat;
						&::before{
							content: '';
							display: block;
							position: absolute;
							bottom: 0;
							width: 199px;
							height: 2px;
							background: url(../assets/data-images/tabs-light.png) no-repeat;
							transform-origin: 100%;
							transform: scaleX(0);
							transition: transform .4s,-webkit-transform .4s;
							left: 50%;
							margin-left: -100px;
						}
						&:hover::before,
						&.active::before{
							transform-origin: 0;
							transform: scaleX(1);
						}
						&:hover,
						&.active{
							font-size: 20px;
							color: #00fbfc;
							font-weight: bold;
						}
					}
					&:nth-child(3){
						a{
							width: 302px;
							background: url(../assets/data-images/tabs-bg.png) no-repeat;
						}
					}
					&:nth-child(4),
					&:nth-child(5){
						a{
							width: 302px;
							background: url(../assets/data-images/tabs-bg-2.png) no-repeat;
						}
					}
				}
			}
		}
		.main{
			position: absolute;
			left: 15px;
			right: 15px;
			bottom: 12px;
			top: 62px;
			padding: 25px;
			.date-types{
				height: 22px;
				line-height: 20px;
				background-color: #010332;
				border: solid 1px #0b5c71;
				border-radius: 5px;
				position: relative;
				overflow: hidden;
				.current-bg{
					position: absolute;
					width: 40px;
					height: 22px;
					background-color: #00fbfc;
					top: 0;
					left: 0;
					transition: all .2s;
				}
				ul{
					display: flex;
					align-items: center;
					li{
						width: 40px;
						text-align: center;
						cursor: pointer;
						color: #1ca5c4;
						position: relative;
						z-index: 2;
						font-size: 12px;
						transition: all .2s;
						&.active{
							color: #030e39;
						}
					}
				}
			}
			.angles{
				.angle-left-top{
					position: absolute;
					left: 0;
					top: 0;
					width: 37px;
					height: 27px;
					background: url(../assets/data-images/angle-left-top.png) no-repeat;
				}
				.angle-right-top{
					position: absolute;
					right: -4px;
					top: -1px;
					width: 42px;
					height: 25px;
					background: url(../assets/data-images/angle-right-top.png) no-repeat;
				}
				.angle-left-bottom{
					position: absolute;
					left: 0;
					bottom: 0;
					width: 30px;
					height: 38px;
					background: url(../assets/data-images/angle-left-bottom.png) no-repeat;
				}
				.angle-right-bottom{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 32px;
					height: 38px;
					background: url(../assets/data-images/angle-right-bottom.png) no-repeat;
				}
			}
			.borders{
				.border-1{
					position: absolute;
					left: 0;
					top: 26px;
					bottom: 38px;
					background-image: linear-gradient(to bottom,#18c8f0,#042490);
					width: 2px;
					z-index: 1;
				}
				.border-2{
					position: absolute;
					right: 3px;
					top: 24px;
					bottom: 38px;
					background-image: linear-gradient(to bottom,#18c8f0,#042490);
					width: 2px;
					z-index: 1;
				}
				.border-3{
					position: absolute;
					top: 0;
					left: 36px;
					height: 2px;
					background-image: linear-gradient(to right,#18c8f0,transparent);
					width: 40%;
				}
				.border-4{
					position: absolute;
					top: 0;
					right: 36px;
					height: 2px;
					background-image: linear-gradient(to left,#18c8f0,transparent);
					width: 40%;
				}
				.border-5{
					position: absolute;
					bottom: 2px;
					left: 30px;
					height: 2px;
					background-image: linear-gradient(to right,#042490,transparent);
					width: 40%;
				}
				.border-6{
					position: absolute;
					bottom: 4px;
					right: 32px;
					height: 2px;
					background-image: linear-gradient(to left,#042490,transparent);
					width: 40%;
				}
			}
			.chart-box{
				position: relative;
				height: 100%;
				padding: 10px;
				border-radius: 5px;
			}
			.chart-box-border{
				border: solid 1px rgba(0,255,255,.3);
				box-shadow: 0 0 15px rgba(0,252,252,.3) inset;
			}
			.user-data{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				li{
					flex: 1;
					margin: 0 5px;
					border-radius: 5px;
					border: solid 1px #00ffff;
					box-shadow: 0 0 15px rgba(0,252,252,.9) inset;
					padding: 10px;
					p{
						font-size: 14px;
						color: #FFF;
					}
					span{
						font-size: 24px;
						font-weight: bold;
					}
					&:nth-child(1) span{
						color: #fdcf00;
					}
					&:nth-child(2) span{
						color: #00fbfc;
					}
					&:nth-child(3) span{
						color: #07eda6;
					}
					&:nth-child(4) span{
						color: #f9764c;
					}
					&:nth-child(5) span{
						color: #7ebbff;
					}
				}
			}
			.merchant-data{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				padding: 0 10%;
				li{
					width: 30%;
					margin: 0 5px;
					border-radius: 5px;
					border: solid 1px #00ffff;
					box-shadow: 0 0 15px rgba(0,252,252,.9) inset;
					padding: 10px;
					p{
						font-size: 14px;
						color: #FFF;
					}
					span{
						font-size: 24px;
						font-weight: bold;
					}
					&:nth-child(1) span{
						color: #fdcf00;
					}
					&:nth-child(2) span{
						color: #00fbfc;
					}
					&:nth-child(3) span{
						color: #07eda6;
					}
					&:nth-child(4) span{
						color: #f9764c;
					}
					&:nth-child(5) span{
						color: #7ebbff;
					}
					&:nth-child(6) span{
						color: #00fbfc;
					}
				}
			}
			.chart-select{
				/deep/ .el-select{
					width: 100px;
					&:nth-child(n+1){
						margin-left: 10px;
					}
					/deep/ .el-input__inner{
						height: 32px;
						line-height: 32px;
						border-color: #02688e;
						background-color: #022672;
						color: #FFF;
						&::-webkit-input-placeholder{
							color: #FFF !important;
						}
					}
					/deep/ .el-input__icon{
						line-height: 32px;
						color: #FFF !important;
					}
				}
			}
		}
}
</style>
